<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-button
          @click="addBannersWay"
          icon="el-icon-circle-plus-outline"
          type="primary"
          >添加轮播图</el-button
        >
        <el-button
          @click="getBannersListWay"
          icon="el-icon-refresh"
          type="primary"
          >刷新</el-button
        >
      </el-row>
      <el-row style="margin-top: 30px">
        <el-table
          v-loading="loading"
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          highlight-current-row
          :data="bannerList"
          style="width: 100%"
        >
          <el-table-column align="center" prop="id" label="ID">
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="添加时间">
          </el-table-column>
          <el-table-column align="center" prop="updated_at" label="更新时间">
          </el-table-column>
          <el-table-column align="center" prop="title" label="标题">
          </el-table-column>
          <el-table-column align="center" prop="image_url" label="图片">
            <template slot-scope="scope">
              <div style="width: 40px; height: 40px; margin: 0 auto">
                <el-image
                  :src="scope.row.image_url"
                  :preview-src-list="[scope.row.image_url]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="target_url" label="跳转地址">
            <template slot-scope="scope">
              <el-button
                @click="getGoodsName(scope.row)"
                v-if="scope.row.type == 2"
                type="text"
              >
                查看商品
              </el-button>
              <span v-else>
                {{ scope.row.target_url }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sort" label="排序">
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            prop="address"
            width="120px"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                style="margin-right: 5px"
                type="text"
                size="mini"
                @click="puttagsWay(scope.row)"
              >
                修改
              </el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="deltagsWay(scope.row)"
              >
                <el-button type="text" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>

 <el-drawer :modal-append-to-body="false" :append-to-body="true" title="轮播图设置" size="65%" :withHeader="false"
      :visible.sync="BannerDialog" @close="handleClose" :show-close="true">
    <div class="drawerTitle" style="margin-bottom: 30px;">
      <span>轮播图设置</span>
      <div class="close" @click="handleClose">
        <i class="el-icon-close" style="font-size: 24px;"></i>
      </div>
    </div>
    <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 150px)">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
        v-loading="addPutLoading"
        style="margin-left: 30px;"
      >
        <el-row :gutter="0">
          <el-col :span="10">
            <el-form-item label="标题" prop="title">
              <el-input
                maxlength="20"
                show-word-limit
                v-model="ruleForm.title"
                placeholder="请输入标题"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="排序" prop="sort">
              <el-input
                maxlength="10"
                show-word-limit
                v-model="ruleForm.sort"
                placeholder="请输入排序"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="关联类型" prop="type">
              <el-radio-group
                v-model="ruleForm.type"
                @change="radioType"
                size="mini"
              >
                <el-radio
                  :label="item.tag_value"
                  border
                  v-for="(item, index) in bannerTypeList"
                  :key="index"
                  >{{ item.tag_name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="20" v-if="ruleForm.type !== 1 && ruleForm.type !== 2">
            <el-form-item label="跳转地址" prop="target_url">
              <el-input
                v-model="ruleForm.target_url"
                placeholder="请输入跳转地址"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20" v-if="ruleForm.type !== 1 && ruleForm.type == 2">
            <el-form-item label="选择商品" prop="target_url">
              <el-select
                v-model="ruleForm.target_url"
                style="width: 100%"
                filterable
                remote
                reserve-keyword
                placeholder="请输入商品名称"
                :remote-method="remoteMethodWay"
                :loading="selectLoading"
              >
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="图片" prop="image_url">
              <logo-upload
                :single-file="image_url"
                :show-file-list="false"
                accept="image/jpeg, image/png"
                @uploadCallback="image_urlCallback"
              />
              <span style="color: #838383">请上传宽高比例为2:1的图片</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      </el-scrollbar>
      <div style="text-align: right;padding-right: 30px;">
        <el-button @click="BannerDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitWay">确 定</el-button>
      </div>
    </el-drawer>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="商品信息" size="50%" :withHeader="false"
         :visible.sync="goodsDetailDialog" @close="handlegoods" :show-close="true">
       <div class="drawerTitle">
         <span>商品信息</span>
         <div class="close" @click="handlegoods">
           <i class="el-icon-close" style="font-size: 24px;"></i>
         </div>
       </div>

      <div style="padding:30px">
        <el-descriptions v-loading="goodsDetailLoading" :column="2">
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="商品名称" :span="2">{{
            goodsDetail.name ? goodsDetail.name : ""
          }}</el-descriptions-item>
          <el-descriptions-item :span="2" label="bn码" labelClassName="descriptionsLabel" content-class-name="descriptionsLabel">{{
            goodsDetail.bn
          }}</el-descriptions-item>
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="商品副标题" :span="4">{{
            goodsDetail.subtitle
          }}</el-descriptions-item>
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="商品分类" :span="2">
            <span style="margin: 1px 3px" v-if="goodsDetail.category1_name">{{
              goodsDetail.category1_name
            }}</span>
            <span style="margin: 1px 3px" v-if="goodsDetail.category2_name">{{
              goodsDetail.category2_name
            }}</span>
            <span style="margin: 1px 3px" v-if="goodsDetail.category3_name">{{
              goodsDetail.category3_name
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="标签" :span="2">
            <span
              style="margin: 1px 3px;color: #0256ff;"
              :key="index"
              v-for="(item, index) in goodsDetail.goods_label_name"
              >{{ item }}</span
            >
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="零售价">
            {{ goodsDetail.product ? goodsDetail.product[0].retail_price : "-" }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="商品库存">
            {{ goodsDetail.product ? goodsDetail.product[0].inventory : "-" }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel" label="规格名称">
            {{ goodsDetail.product ? goodsDetail.product[0].sku_name : "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  editBanners,
  addBanners,
  delBanners,
  getBannersList,
} from "@/api/admin/carousel";
import {
  getDictionaryTypeList,
  getGoodsList,
  getGooddetail,
} from "@/api/index";
import LogoUpload from "@/components/FileUpload";
export default {
  components: {
    LogoUpload,
  },
  data() {
    return {
      loading: false,
      title: "添加轮播图",
      bannerTypeList: [],
      bannerList: [],
      goodsList: [],
      ruleForm: {
        type: 1,
        title: "",
        image_url: "",
        target_url: "",
        sort: 100,
      },
      image_url: {},
      selectLoading: false,
      addPutLoading: false,
      rules: {
        title: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                return callback(new Error("请输入标题"));
              } else {
                if (req.test(value)) {
                  return callback(new Error("标题中不能包含特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        sort: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9]/g;
              if (!value) {
                return callback(new Error("请输入排序"));
              } else {
                if (req.test(value)) {
                  return callback(new Error("排序必须是数字且只能为整数"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择关联类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        target_url: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.type !== 1) {
                if (this.ruleForm.type == 2) {
                  if (value === "") {
                    return callback(new Error("请选择关联的商品"));
                  } else {
                    callback();
                  }
                }
                if (this.ruleForm.type == 3) {
                  if (value === "") {
                    return callback(new Error("请输入需要跳转的外部链接"));
                  } else {
                    callback();
                  }
                }
                if (this.ruleForm.type == 4) {
                  if (value === "") {
                    return callback(new Error("请输入需要跳转应用内的地址"));
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        image_url: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.image_url === "") {
                return callback(new Error("请上传轮播图片"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      BannerDialog: false,
      goodsDetail: {},
      goodsDetailLoading: false,
      goodsDetailDialog: false,
    };
  },
  created() {
    getDictionaryTypeList({ type: "banner_type" }).then((res) => {
      this.bannerTypeList = res.data;
    });
    getGoodsList({ page: 1, count: 10 }).then((res) => {
      this.goodsList = res.data.list;
    });
    this.getBannersListWay();
  },
  methods: {
    getBannersListWay() {
      var _this = this;
      this.loading = true;
      getBannersList().then((res) => {
        if (res.code !== 200) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        console.log(res);
        this.bannerList = res.data.list;
        this.loading = false;
      });
    },
    addBannersWay() {
      this.title = "添加轮播图";
      this.BannerDialog = true;
    },
    submitWay() {
      this.$refs.ruleForm.validate((valid, err) => {
        if (valid) {
          this.addPutLoading = true;
          if (this.ruleForm.id) {
            editBanners(this.ruleForm).then((res) => {
              if (res.code !== 200) {
                return this.$messages.error(res.msg);
              }
              this.handleClose();
              this.$messages.success(res.msg);
              this.addPutLoading = false;
              this.BannerDialog = false;
              this.getBannersListWay();
            });
          } else {
            addBanners(this.ruleForm).then((res) => {
              if (res.code !== 200) {
                return this.$messages.error(res.msg);
              }
              this.handleClose();
              this.$messages.success(res.msg);
              this.addPutLoading = false;
              this.BannerDialog = false;
              this.getBannersListWay();
            });
          }
        } else {
          return false;
        }
      });
    },
    radioType() {
      this.ruleForm.target_url = "";
    },
    handlegoods(){
      this.goodsDetailDialog = false
    },
    handleClose() {
      this.ruleForm = {
        type: 1,
        title: "",
        image_url: "",
        target_url: "",
        sort: 100,
      };
      this.$refs.ruleForm.resetFields();
      this.image_url = {};
      this.BannerDialog = false
    },
    deltagsWay(row) {
      this.loading = true;
      delBanners({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getBannersListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    // 下拉框搜索调用
    remoteMethodWay(query) {
      if (query !== "") {
        this.selectLoading = true;
        getGoodsList({ page: 1, count: 20, keywords: query }).then((res) => {
          this.selectLoading = false;
          this.goodsList = res.data.list;
        });
      }
    },
    // 修改
    puttagsWay(row) {
      this.title = "修改标签";
      this.BannerDialog = true;
      this.addPutLoading = true;
      if (row.type == 2) {
        getGoodsList({ keywords: Number(row.target_url) }).then((res) => {
          if (res.code !== 200) {
            return this.$messages.error(res.msg);
          }
          this.goodsList = res.data.list;
          this.ruleForm = JSON.parse(JSON.stringify(row));
          this.ruleForm.target_url = Number(this.ruleForm.target_url);

          this.image_url = {
            url: this.ruleForm.image_url,
          };
          this.addPutLoading = false;
        });
      } else {
        this.ruleForm = JSON.parse(JSON.stringify(row));
        this.image_url = {
          url: this.ruleForm.image_url,
        };
        this.addPutLoading = false;
      }
    },
    image_urlCallback(file) {
      this.image_url = file;
      this.ruleForm.image_url = file.url;
    },
    // 返回商品名字
    getGoodsName(row) {
      this.goodsDetailDialog = true;
      this.goodsDetailLoading = true;
      getGooddetail({ goods_id: Number(row.target_url) }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.goodsDetailLoading = false;
          this.goodsDetailDialog = false;
          return this.$messages.error(res.msg);
        }
        this.goodsDetail = res.data;
        this.goodsDetailLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
